<template>
  <div
    class="relative bg-white p-3 shadow rounded-lg duration-300 hover:shadow-lg overflow-hidden border border-gray-100 dark:bg-[#181818]"
  >
    <div v-if="icon || title" class="flex items-center mb-4">
      <div v-if="icon" class="mr-4 iconfont text-[22px]">
        <svg-icon :icon-class="icon"></svg-icon>
      </div>
      <h2 v-if="title" class="text-lg">{{ title }}</h2>
    </div>
    <div class="absolute right-3 top-1"><slot name="rt" /></div>
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: false,
      default: '',
    },
    icon: {
      type: String,
      required: false,
      default: '',
    },
  },
}
</script>
